<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index:999999;}

        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 60vw;
            height: 60vw;
            margin: -30vw 0 0 -30vw;
            z-index: 1001;
        }
        #loader img.bobo{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        #loader img.logo{
            width: 46vw;
            height: 40vw;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -20vw 0 0 -23vw;
        }
        #loader-wrapper .loader-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: #fff; /* Old browsers */
            z-index: 1000;
            -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(0);  /* IE 9 */
            transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}
        #loader-wrapper .loader-section.section-left {left: 0;}
        #loader-wrapper .loader-section.section-right {right: 0;}

        /* Loaded */
        .loaded #loader-wrapper .loader-section.section-left {
            -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
            transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
        .loaded #loader-wrapper .loader-section.section-right {
            -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
            transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
        .loaded #loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;}
        .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
            transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.3s 1s ease-out;
            transition: all 0.3s 1s ease-out;}
        /* JavaScript Turned Off */
        .no-js #loader-wrapper {display: none;}
        .no-js h1 {color: #222222;}
    </style>
    <script src="http://crusader12.com/C12HoverAlls/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        // 等待所有加载
        $(window).load(function(){
            $('body').addClass('loaded');
            $('#loader-wrapper .load_title').remove();
        });
    </script>
</head>
<body>
<div id="loader-wrapper">
    <div id="loader">
        <img class="bobo" src="http://mobile.dichanxuetang.com/android/img/bobo.gif">
        <img class="logo" src="http://mobile.dichanxuetang.com/android/img/logo.png">
    </div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
234
<script>

    /**
     * 获取浏览器类型以及版本号
     * 支持国产浏览器:猎豹浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、360安全浏览器、
     * QQ浏览器、百度浏览器等.
     * 支持国外浏览器:IE,Firefox,Chrome,safari,Opera等.
     * 使用方法:
     * 获取浏览器版本:Browser.client.version
     * 获取浏览器名称(外壳):Browser.client.name
     * @author:xuzengqiang
     * @since :2015-1-27 10:26:11
     **/
    var Browser=Browser || (function(window){
            var document = window.document,
                navigator = window.navigator,
                agent = navigator.userAgent.toLowerCase(),
                //IE8+支持.返回浏览器渲染当前文档所用的模式
                //IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8)
                //IE10:10(兼容模式7||8||9)
                IEMode = document.documentMode,
                //chorme
                chrome = window.chrome || false ,
                System = {
                    //user-agent
                    agent : agent,
                    //是否为IE
                    isIE : /msie/.test(agent),
                    //Gecko内核
                    isGecko: agent.indexOf( "gecko" )> 0 && agent.indexOf( "like gecko" )< 0 ,
                    //webkit内核
                    isWebkit: agent.indexOf( "webkit" )> 0 ,
                    //是否为标准模式
                    isStrict: document.compatMode === "CSS1Compat" ,
                    //是否支持subtitle
                    supportSubTitle:function(){
                        return "track" in document.createElement( "track" );
                    },
                    //是否支持scoped
                    supportScope:function(){
                        return "scoped" in document.createElement( "style" );
                    },
                    //获取IE的版本号
                    ieVersion:function(){
                        try {
                            return agent.match(/msie ([\d.]+)/)[ 1 ] || 0 ;
                        } catch (e) {
                            console.log( "error" );
                            return IEMode;
                        }
                    },
                    //Opera版本号
                    operaVersion:function(){
                        try {
                            if (window.opera) {
                                return agent.match(/opera.([\d.]+)/)[ 1 ];
                            } else if (agent.indexOf( "opr" ) > 0 ) {
                                return agent.match(/opr\/([\d.]+)/)[ 1 ];
                            }
                        } catch (e) {
                            console.log( "error" );
                            return 0 ;
                        }
                    },
                    //描述:version过滤.如31.0.252.152 只保留31.0
                    versionFilter:function(){
                        if (arguments.length === 1 && typeof arguments[ 0 ] === "string" ) {
                            var version = arguments[ 0 ];
                            start = version.indexOf( "." );
                            if (start> 0 ){
                                end = version.indexOf( "." ,start+ 1 );
                                if (end !== - 1 ) {
                                    return version.substr( 0 ,end);
                                }
                            }
                            return version;
                        } else if (arguments.length === 1 ) {
                            return arguments[ 0 ];
                        }
                        return 0 ;
                    }
                };

            try {
                //浏览器类型(IE、Opera、Chrome、Safari、Firefox)
                System.type = System.isIE? "IE" :
                    window.opera || (agent.indexOf( "opr" ) > 0 )? "Opera" :
                        (agent.indexOf( "chrome" )> 0 )? "Chrome" :
                            //safari也提供了专门的判定方式
                            window.openDatabase? "Safari" :
                                (agent.indexOf( "firefox" )> 0 )? "Firefox" :
                                    'unknow' ;

                //版本号
                System.version = (System.type === "IE" )?System.ieVersion():
                    (System.type === "Firefox" )?agent.match(/firefox\/([\d.]+)/)[ 1 ]:
                        (System.type === "Chrome" )?agent.match(/chrome\/([\d.]+)/)[ 1 ]:
                            (System.type === "Opera" )?System.operaVersion():
                                (System.type === "Safari" )?agent.match(/version\/([\d.]+)/)[ 1 ]:
                                    "0" ;

                //浏览器外壳
                System.shell=function(){
                    //遨游浏览器
                    if (agent.indexOf( "maxthon" ) > 0 ) {
                        System.version = agent.match(/maxthon\/([\d.]+)/)[ 1 ] || System.version ;
                        return "傲游浏览器" ;
                    }
                    //QQ浏览器
                    if (agent.indexOf( "qqbrowser" ) > 0 ) {
                        System.version = agent.match(/qqbrowser\/([\d.]+)/)[ 1 ] || System.version ;
                        return "QQ浏览器" ;
                    }

                    //搜狗浏览器
                    if ( agent.indexOf( "se 2.x" )> 0 ) {
                        return '搜狗浏览器' ;
                    }

                    //Chrome:也可以使用window.chrome && window.chrome.webstore判断
                    if (chrome && System.type !== "Opera" ) {
                        var external = window.external,
                            clientInfo = window.clientInformation,
                            //客户端语言:zh-cn,zh.360下面会返回undefined
                            clientLanguage = clientInfo.languages;

                        //猎豹浏览器:或者agent.indexOf("lbbrowser")>0
                        if ( external && 'LiebaoGetVersion' in external) {
                            return '猎豹浏览器' ;
                        }
                        //百度浏览器
                        if (agent.indexOf( "bidubrowser" )> 0 ) {
                            System.version = agent.match(/bidubrowser\/([\d.]+)/)[ 1 ] ||
                                agent.match(/chrome\/([\d.]+)/)[ 1 ];
                            return "百度浏览器" ;
                        }
                        //360极速浏览器和360安全浏览器
                        if ( System.supportSubTitle() && typeof clientLanguage === "undefined" ) {
                            //object.key()返回一个数组.包含可枚举属性和方法名称
                            var storeKeyLen = Object.keys(chrome.webstore).length,
                                v8Locale = "v8Locale" in window;
                            return storeKeyLen > 1 ? '360极速浏览器' : '360安全浏览器' ;
                        }
                        return "Chrome" ;
                    }
                    return System.type;
                };

                //浏览器名称(如果是壳浏览器,则返回壳名称)
                System.name = System.shell();
                //对版本号进行过滤过处理
                System.version = System.versionFilter(System.version);

            } catch (e) {
                console.log( "error" );
            }
            return {
                client:System
            };

        })(window);
    alert(Browser.client.name+ " " +Browser.client.version);
</script>
</body>
</html>